<template>
  <div class="home-container">
    <div class="panel">
      <el-form
        :model="queryParams"
        size="small"
        :inline="true"
        label-width="68px"
      >
        <el-form-item label="">
          <el-select
            v-model="queryParams.deptId"
            placeholder="全部科室"
            clearable
          >
            <el-option
              v-for="item in deptOptions"
              :key="item.deptId"
              :label="item.deptName"
              :value="item.deptId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="">
          <el-date-picker
            v-model="queryParams.date"
            style="width: 240px"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
        </el-form-item>
      </el-form>
      <div class="list">
        <div class="item" v-for="item in list" :key="item.title">
          <div class="title">
            {{ item.deptName }}
            <div class="view" @click="toView(item)">查看明细</div>
          </div>
          <div class="content">
            <div class="sub-item">
              <div class="name">总数</div>
              <div class="num">{{ item.totalCount }}</div>
            </div>
            <div class="sub-item">
              <div class="name">待分配数</div>
              <div class="num">{{ item.waitingDistributionCount }}</div>
            </div>
            <div class="sub-item">
              <div class="name">待完结数</div>
              <div class="num">{{ item.waitingCompleteCount }}</div>
            </div>
            <div class="sub-item">
              <div class="name">已完结数</div>
              <div class="num">{{ item.completedCount }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="panel">
      <el-form
        :model="chartParams"
        size="small"
        :inline="true"
        label-width="68px"
      >
        <el-form-item label="">
          <el-select
            v-model="chartParams.deptId"
            placeholder="全部科室"
            clearable
          >
            <el-option
              v-for="item in deptOptions"
              :key="item.deptId"
              :label="item.deptName"
              :value="item.deptId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleChart"
            >搜索</el-button
          >
        </el-form-item>
      </el-form>
      <div class="chart" ref="chart"></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import moment from "moment";
import { listDept } from "@/api/system/dept";
import { homeCardCount, homeLineCount } from "@/api/index";
export default {
  data() {
    return {
      queryParams: {
        deptId: "",
        date: [],
      },
      chartParams: {
        deptId: "",
      },
      list: [],
      deptOptions: [],
      chart: null,
    };
  },
  mounted() {
    this.getDeptList();
    this.getHomeCardCount();
    this.getHomeLineCount();
    window.addEventListener("resize", this.handleResize);
  },
  destroyed() {
    window.removeEventListener("resize", this.handleResize);
  },
  methods: {
    /** 查询科室列表 */
    getDeptList() {
      listDept({}).then((response) => {
        let data = response.data || [];
        data = data.filter(
          (item) => item.deptId !== 100 && item.deptId !== 203
        );
        this.deptOptions = data;
      });
    },
    /** 查询卡片数据 */
    getHomeCardCount() {
      let params = this.queryParams;
      if (params.date) {
        params.startDate = params.date[0];
        params.endDate = params.date[1];
        delete params.date;
      }
      homeCardCount(params).then((response) => {
        let data = response.data || [];
        this.list = data;
      });
    },
    /** 查询图形统计 */
    getHomeLineCount() {
      let params = {
        ...this.chartParams,
        startDate: moment().subtract(1, "year").format("YYYY-MM-DD"),
        endDate: moment().format("YYYY-MM-DD"),
      };

      homeLineCount(params).then((response) => {
        let data = response.data || [];
        this.getChart(data);
      });
    },
    /** 搜索卡片  */
    handleQuery() {
      this.getHomeCardCount();
    },
    /** 搜索图形统计 */
    handleChart() {
      this.getHomeLineCount();
    },
    /** 获取图表  */
    getChart(data = {}) {
      this.chart = echarts.init(this.$refs.chart, "macarons");
      if (data.deptList && data.deptList.length) {
        data.deptList.forEach((item) => {
          item.endLabel = {
            show: true,
            formatter: function (params) {
              return item.name;
            },
          };
        });
      }
      let seriesData = [...data.statusList, ...data.deptList];
      let xAxisData = data.dateList || [];
      this.chart.setOption(
        {
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
              crossStyle: {
                color: "#999",
              },
            },
          },
          grid: {
            right: "4%",
            left: "4%",
            top: "10%",
            bottom: "10%",
          },
          legend: {
            data: ["总数", "已完结", "待完结", "待分配"],
          },
          xAxis: [
            {
              type: "category",
              data: xAxisData,
              axisPointer: {
                type: "shadow",
              },
            },
          ],
          yAxis: [
            {
              type: "value",
              name: "",
              min: 0,
              max: 250,
              interval: 50,
              axisLabel: {
                formatter: "{value}",
              },
            },
            {
              type: "value",
              name: "",
              min: 0,
              max: 25,
              interval: 5,
              axisLabel: {
                formatter: "{value}",
              },
            },
          ],
          series: [
            ...seriesData,
            // {
            //   name: '器械科',
            //   type: 'line',
            //   yAxisIndex: 1,
            //   endLabel: {
            //   show: true,
            //   formatter: function (params) {
            //      return '器械科';
            //   }
            // },
            //   data: [2.0, 2.2, 3.3, 4.5, 6.3, 5.0, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
            // }
          ],
        },
        true
      );
    },
    //跳转到详情页
    toView(row) {
      this.$router.push({
        path: "/task/todo",
        query: {
          id: row.id,
        },
      });
    },
    handleResize() {
      if (this.chart) {
        this.chart.resize();
      }
    },
  },
};
</script>

<style scoped lang="scss">
@import "@/assets/styles/home.scss";
</style>
